﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>生产计划</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-table.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <script src="~/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>
    <script src="~/scripts/bootstrap-table.js"></script>
    <script src="~/scripts/bootstrap-datetimepicker.min.js"></script>
    <script src="~/scripts/locale/bootstrap-table-zh-CN.js"></script>
    <script src="~/scripts/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript">
        function initTable() {
            $("#table").bootstrapTable('destroy');
            $("#table").bootstrapTable({
                columns: [
                    { checkbox: true, visible: true },
                    { field: 'ID', title: 'ID', sortable: true, align: 'center', valign: 'middle', visible: false },
                    { field: 'PlanCode', title: '生产计划代码', align: 'center', valign: 'middle' },
                    {
                        field: 'PlanDate', title: '生产计划日期', align: 'center', valign: 'middle',
                        formatter: dateF = function (value) {
                            return changeDateFormat(value);
                        }
                    },
                    { field: 'OperatorCode', title: '业务员代码', align: 'center', valign: 'middle' },
                    { field: 'SEOrderCode', title: '销售订单号', align: 'center', valign: 'middle' },
                    { field: 'InvenCode', title: '存货代码', align: 'center', valign: 'middle' },
                    { field: 'Quantity', title: '需求数量', align: 'center', valign: 'middle' },
                    {
                        field: 'FinishDate', title: '完成日期', align: 'center', valign: 'middle',
                        formatter: dateF = function (value) {
                            return changeDateFormat(value);
                        }
                    },
                    {
                        field: 'IsFlag', title: '是否审核', align: 'center', valign: 'middle',
                        formatter: function (value) {
                            var IsFlag = {0:"待审核",1:"已审核"};
                            var htmStr = "";
                            if (IsFlag[value] == "待审核") {
                                htmStr = "<span style='color:#fa9f00'>" + IsFlag[value] + "</span>";
                            } else {
                                htmStr = "<span style='color:#00ff00'>" + IsFlag[value] + "</span>"
                            }
                            return htmStr;
                        }
                    },
                    {
                        field: 'ID',
                        title: '操作',
                        align: 'center',
                        valign: 'middle',
                        formatter: actionFormatter
                    },
                ],
                url: '@Url.Action("getproPlanRecords", "Production")',
                method: 'POST',
                contentType: 'application/x-www-form-urlencoded;charset=UTF-8',//发送到服务器的数据编码类型，适用于post请求
                toolbar: '#toolbar',
                striped: true,
                cache: true,
                pagination: true,
                sortable: true,
                sortOrder: "asc",
                sidePagination: 'server',           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: 10,                     //每页的记录行数（*）
                pageList: [10, 25, 50, 100],
                search: false,
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 390,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
                //cardView: true,                    //是否显示详细视图
                detailView: false,      //是否显示父子表
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                //得到查询参数
                queryParams: function (params) {
                    var temp = {
                        limit: params.limit,//页面大小
                        offset: params.offset,//要跳过的页码
                        sortcolumsname: params.sort,
                        order: params.order,
                    };
                    return temp;
                },
            });
        }
        //加载表格，搜索和重置
        $(function () {
            initTable();
            $("#btn-search").click(function () {
                $("#table").bootstrapTable("refresh");
            });
            $("#btn-reset").click(function () {
                $("#table").bootstrapTable("refresh");
            });

            // 日历
            $('.form_datetime').datetimepicker({
                minView: "month", //选择日期后，不会再跳转去选择时分秒
                weekStart: 1,    //一周从哪一天开始 0（星期日）到6（星期六）
                language: 'zh-CN',
                format: 'yyyy-mm-dd',
                todayBtn: true,
                todayHighlight:true,
                autoclose: true//选择一个日期后关闭当前选择器
            });
            //页面刷新时时间输入框内容清空
            $("#txtJoinDate").val("");
            //模态框关闭时清空数据
            //$("body").on("hidden.bs.modal", "#Modal-Option", function () {
            //    $("input,textarea").val("")
            //    $(".form-group").removeClass("has-success").removeClass("has-error");
            //    $(".help-block").text("").html("&nbsp;");
            //});
        });
        //操作列格式化函数
        function actionFormatter(value, row, index) {
            var id = value;
            var result = "";
            result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"optionRecords('editById','" + id + "')\" title='编辑'><span class='glyphicon glyphicon-edit'></span></a>";
            result += "&nbsp;&nbsp;<a href='javascript:;' class='btn btn-xs red' onclick=\"deleteRecords('" + id + "','deleteById')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
            return result;
        }
        //转换日期格式
        function changeDateFormat(cellval) {
            if (cellval != null) {
                var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10))
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                return date.getFullYear()+"-"+month+"-"+currentDate;
            }
        }
        //逻辑判断进行添加或者修改操作
        function optionRecords(action,id) {
            switch (action) {
                case "add":
                    $("#Modal-Option").modal("show");
                    break;
                case "edit":
                    var opts = $("#table").bootstrapTable("getSelections");
                    if (opts.length != 1) {
                        Info("请选择有效记录");
                    } else {
                        $("#Modal-Option").modal("show");
                    }
                    break;
                case "editById":
                    $("#Modal-Option").modal("show");
                    break;
            }
            $("#Modal-Option #btn-Option").on("click", function () {
                Info("操作成功!");
                $("#Modal-Option").modal("hide");
                $("#table").bootstrapTable("refresh");
            });
        }
        //逻辑判断对表格进行单个删除或批量删除操作
        function deleteRecords(id, action) {
            switch (action) {
                case "delete":
                    var opts = $("#table").bootstrapTable('getSelections');
                    if (opts == "") {
                        Info("请选择要删除的记录");
                    }
                    else {
                        var idArray = new Array();
                        for (var i = 0; i < opts.length; i++) {
                            idArray.push(opts[i].ID);
                        }
                    }
                    break;
                case "deleteById":
                    var opts = $("#table").bootstrapTable('getRowByUniqueId', id);
                    var idArray = new Array();
                    idArray.push(opts.ID);
                    break;
            }
            besure("是否删除所选 " + idArray.length + " 条记录？")
            $("#confirmModal #btn-yes").click(function () {
                Info("删除成功");
                $("#confirmModal").modal("hide");
                $("#table").bootstrapTable('refresh');
            });
        }
        //审核
        function Audit(action) {
            var opts = $("#table").bootstrapTable('getSelections');
            switch (action) {
                case "pass":
                    if (opts == "") {
                        Info("请选择要审核的记录")
                    } else {
                        Info("审核完成!");
                        $("#table").bootstrapTable("refresh");
                    }
                    break;
                case "abandon":
                    if (opts == "") {
                        Info("请选择要弃审的记录")
                    } else {
                        Info("已弃审!");
                        $("#table").bootstrapTable("refresh");
                    }
                    break;
            }
        }
        //提示对话框，一框多用
        function Info(message) {
            $("#infoModal #message").text(message);
            $("#infoModal").modal("show");
        }
        //确认对话框
        function besure(message) {
            $("#confirmModal #message").text(message);
            $("#confirmModal").modal("show");
        }
        //页面是否有滚动条
        function isScroll() { return true; };
        //防止页面抖动
        $(function () {
            $(".fade").on("show.bs.modal", function (e) {
                if (isScroll) {
                    $("body").addClass("myModal-open");
                }
            });
        });
    </script>
    <style type="text/css">
        .myModal-open {
            /*overflow-y: scroll;*/
            padding-right: 0 !important;
        }
    </style>
</head>
<body style="overflow-y: scroll;">
    <div style="padding-top:10px;padding-left:15px;padding-right:15px;">
        <div class="alert alert-info alert-dismissible fade in " role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>温馨提示：</strong> 该模块后台功能正在开发中...
        </div>
        <div class="form-group-sm">
            <div class="col-xs-2">
                <input type="text" id="txtEmployeeCode" class="form-control" placeholder="生产计划代码" />
            </div>
            <div class="col-xs-2">
                <input type="text" id="txtEmployeeName" class="form-control" placeholder="存货代码" />
            </div>
            <div class="col-xs-2">
                <input type="text" id="txtDepartmentCode" class="form-control" placeholder="销售订单号" />
            </div>
            <div class="col-xs-2">
                <div class="input-group">
                    <input type="text" class="form-control form_datetime" id="txtJoinDate" placeholder="生产计划日期">
                    <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
                </div>
            </div>
            <button id="btn-search" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>  搜索</button>
            <button id="btn-reset" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>  重置</button>
        </div>
        <div id="toolbar" class="btn-group-sm">
            <button id="btn-add" type="button" onclick="optionRecords('add',0)" class="btn btn-success">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
            </button>
            <button id="btn-edit" onclick="optionRecords('edit', 0)" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改
            </button>
            <button id="btn-delete" onclick="deleteRecords(0, 'delete')" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除
            </button>
            <button id="btn-delete" onclick="Audit('pass')" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> 审核
            </button>
            <button id="btn-delete" onclick="Audit('abandon')" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> 弃审
            </button>
        </div>
        <table id="table"></table>
    </div>
    <!-- Modal(增改) -->
    <div class="modal fade" id="Modal-Option" tabindex="-1" role="dialog" aria-labelledby="EmsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" id="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="EmsModalLabel"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 添加</h4>
                </div>
                <div class="modal-body" id="EmsModalPreview">
                    <div style="margin-left:25px;">
                        这里是要编辑的内容
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 关闭</button>
                    <button type="button" id="btn-Option" class="btn btn-primary"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal(消息提示框) -->
    <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="width:300px;" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#286090;height:40px;">
                    <h4 class="modal-title" style="position:absolute;top:10px;left:10px;color:white;"><span class="glyphicon glyphicon-info-sign" aria-hidden="true" style="color:white;"></span> 提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p id="message" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-size:medium"></p>
                </div>
                <div class="modal-footer" style="height:40px;">
                    <button type="button" class="btn btn-primary" style="position:absolute;right:10px;bottom:3px;" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal(提示是否确认)-->
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="width:300px;" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#286090;height:40px;">
                    <h4 class="modal-title" style="position:absolute;top:10px;left:10px;color:white;">提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p id="message" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-size:medium"></p>
                </div>
                <div class="modal-footer" style="height:40px;">
                    <button type="button" data-dismiss="modal" class="btn btn-default" style="position:absolute;right:75px;bottom:3px;"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 否</button>
                    <button type="button" id="btn-yes" class="btn btn-primary" style="position:absolute;right:10px;bottom:3px;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 是</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
